<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        const counter = {
            data() {
                return {
                    count: 1
                }
            },
            template: `
          <div @click="count++">{{ count }}</div>`
        }

        const helloworld = {
            data() {
                return {
                    num: 12
                }
            },
            methods: {
                addNum() {
                    this.num++;
                }
            },
            template: `
          <div @click="addNum()" style="border:1px solid #2bac94;width:300px;height:100px;text-align:center">{{ num }}
          </div>
        `
        }

        const app = Vue.createApp({
            components: { counter, helloworld },
            data() {
                return {}
            },
            methods: {},
            /**
             * 组价具有复用性
             * 全局组件只要定义了，处处可以使用，性能不高，但是使用起来简单。名字建议小写字母，中间用横线间隔
             * 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦。建议大写字母开头，驼峰命名
             * 局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue底层也会自动尝试帮你做映射
             */
            template: `
          <div>
            <counter/>
            <counter/>
            <counter/>
          </div>
          <helloworld/>
        `
        });

        // app.component("counter",{
        //     data(){
        //         return {
        //             count: 1
        //         }
        //     },
        //     template: `
        //       <div @click="count ++">{{ count }}</div>
        //     `
        // });
        const vm = app.mount("#app");
    </script>
</body>

</html>